<template>
    <div class="questionnaire-list">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="问卷列表" left-arrow @click-left="onBack">
            <template #right>
                <div class="nav-icons">
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="circle-btn"></span>
                </div>
            </template>
        </van-nav-bar>

        <div class="list-container">
            <!-- 问卷卡片列表 -->
            <div class="questionnaire-cards">
                <!-- 门诊满意度调查 -->
                <div class="survey-card">
                    <div class="card-content">
                        <div class="card-left">
                            <h3 class="survey-title">门诊满意度调查</h3>
                            <p class="participation-count">8888人已参与</p>
                        </div>
                        <div class="card-right">
                            <div class="survey-icon">
                                <div class="icon-circle outer"></div>
                                <div class="icon-circle inner"></div>
                            </div>
                            <van-button type="primary" size="small" round @click="participateSurvey('outpatient')"
                                class="participate-btn">
                                立即参与
                            </van-button>
                        </div>
                    </div>
                    <div class="card-pattern"></div>
                </div>

                <!-- 住院满意度调查 -->
                <div class="survey-card">
                    <div class="card-content">
                        <div class="card-left">
                            <h3 class="survey-title">住院满意度调查</h3>
                            <p class="participation-count">888人已参与</p>
                        </div>
                        <div class="card-right">
                            <div class="survey-icon">
                                <div class="icon-circle outer"></div>
                                <div class="icon-circle inner"></div>
                            </div>
                            <van-button type="primary" size="small" round @click="participateSurvey('inpatient')"
                                class="participate-btn">
                                立即参与
                            </van-button>
                        </div>
                    </div>
                    <div class="card-pattern"></div>
                </div>

                <!-- 医院环境满意度调查 -->
                <div class="survey-card">
                    <div class="card-content">
                        <div class="card-left">
                            <h3 class="survey-title">医院环境满意度调查</h3>
                            <p class="participation-count">888人已参与</p>
                        </div>
                        <div class="card-right">
                            <div class="survey-icon">
                                <div class="icon-circle outer"></div>
                                <div class="icon-circle inner"></div>
                            </div>
                            <van-button type="primary" size="small" round @click="participateSurvey('environment')"
                                class="participate-btn">
                                立即参与
                            </van-button>
                        </div>
                    </div>
                    <div class="card-pattern"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

const onBack = () => {
    router.back();
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const participateSurvey = (type: string) => {
    // 跳转到问卷详情页面
    router.push('/questionnaire-detail');
};
</script>

<style scoped>
.questionnaire-list {
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.list-container {
    flex: 1;
    padding: 16px;
}

/* 导航栏图标 */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 6px;
    height: 6px;
    background: #d8d8d8;
    border-radius: 50%;
    display: inline-block;
}

.circle-btn {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d8d8d8;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
}

/* 问卷卡片 */
.questionnaire-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.survey-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.card-left {
    flex: 1;
}

.survey-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.participation-count {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.card-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 调查图标 */
.survey-icon {
    position: relative;
    width: 32px;
    height: 32px;
}

.icon-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(51, 138, 255, 0.1);
}

.icon-circle.outer {
    width: 32px;
    height: 32px;
    top: 0;
    left: 0;
}

.icon-circle.inner {
    width: 24px;
    height: 24px;
    top: 4px;
    left: 4px;
    background: rgba(51, 138, 255, 0.2);
}

/* 参与按钮 */
.participate-btn {
    background: #338aff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    height: 32px;
    min-width: 80px;
}

.participate-btn:active {
    transform: translateY(1px);
}

/* 卡片背景图案 */
.card-pattern {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background-image:
        linear-gradient(45deg, transparent 40%, rgba(51, 138, 255, 0.05) 40%, rgba(51, 138, 255, 0.05) 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(51, 138, 255, 0.05) 40%, rgba(51, 138, 255, 0.05) 60%, transparent 60%);
    background-size: 8px 8px;
    border-radius: 0 0 12px 0;
    z-index: 1;
}

/* 响应式设计 */
@media (max-width: 375px) {
    .survey-title {
        font-size: 16px;
    }

    .participation-count {
        font-size: 12px;
    }

    .participate-btn {
        font-size: 12px;
        padding: 6px 12px;
        min-width: 70px;
    }
}
</style>